import {Button, Flex, Space, Switch, Table} from "antd";
import {useEffect, useRef, useState} from "react";
import {DownloadOutlined, PlusOutlined} from "@ant-design/icons";
import {editCategoryUrl, getCategoryAllUrl, removeCategoryByIdUrl} from "@/api/blog/category.ts";
import EditDialog from "@/pages/blog/category/editDialog.tsx";
import {getModalSystemConfig, globalMessageApi, globalModalApi} from "@/components/OpComponent/Message";
import {PageWrapperBox, TableContainerBox} from "@/layout/Page";
import {useNavigate} from "react-router-dom";


export default function () {

    const [data, setData] = useState([])
    const [loading, setLoading] = useState(false)
    const navigate = useNavigate()

    const editDialogRef = useRef<any>(null)

    function getTableDateList() {
        setLoading(true)
        getCategoryAllUrl().then((res: any) => {
            setData(res.data)
            setLoading(false)
        })
    }

    function handleDelete(record: any) {
        if (record.articleNum && record.articleNum > 0) {
            globalMessageApi.error("该专栏下有文章，无法删除")
            return
        }
        globalModalApi.confirm(getModalSystemConfig("是否删除该专栏?")).then((confirm: boolean) => {
            if (confirm) {
                removeCategoryByIdUrl(record.bcId).then((res: any) => {
                    globalMessageApi.success(res.msg)
                    getTableDateList()
                })
            }
        })
    }

    function handleSwitch(record: any){
        const text = record.status === 0 ? "禁用" : "启用"
        // 是否禁用启用该专栏？
        globalModalApi.confirm(getModalSystemConfig(`是否${text}该专栏?`)).then((confirm: boolean) => {
            if (confirm) {
                // 禁用启用该专栏
                const status = record.status === 0 ? 1 : 0
                const params = {
                    bcId: record.bcId,
                    status: status
                }
                // 禁用启用该专栏
                editCategoryUrl(params).then((res: any) => {
                    globalMessageApi.success(res.msg)
                    getTableDateList()
                })
            }
        })
    }

    useEffect(() => {
        getTableDateList()
    }, []);

    const columns: any = [
        {title: "编号", minWidth: 60, dataIndex: "bcId", align: "center"},
        {title: "专栏名称", minWidth: 160, dataIndex: "bcName", ellipsis: true, align: "center"},
        {
            title: "文章数量",
            minWidth: 90,
            dataIndex: "articleNum",
            align: "center",
            ellipsis: true,
        },
        {
            title: "排序",
            minWidth: 90, dataIndex: "sort", align: "center",
            sorter: {
                compare: (a: any, b: any) => a.sort - b.sort,
                multiple: 1,
            },

        },
        {
            title: "创建时间", minWidth: 160, dataIndex: "createTime", align: "center",
            sorter: {
                compare: (a: any, b: any) => new Date(b.createTime).getDate() - new Date(a.createTime).getDate(),
                multiple: 2,
            },
        },
        {
            title: "状态", minWidth: 160, dataIndex: "status", align: "center",
            render: (text: any, record: any) => {
                return <Switch size="small" checked={text === 0} onChange={() => handleSwitch(record)}/>
            },
        },
        {
            title: "操作", minWidth: 160, align: "center", fixed: "right", render: (record: any, index: number) => {
                return <Space key={index}>
                    <a onClick={() => navigate("/blog/category/detailPage/" + record.bcId + "?" + "bcName=" + record.bcName)}>文章</a>
                    <a onClick={() => editDialogRef.current.openModal(record)}>编辑</a>
                    <a className={"text-red-500"} onClick={() => handleDelete(record)}>删除</a>
                </Space>
            }
        },
    ];

    return <PageWrapperBox>
        <TableContainerBox>
            <Flex gap="small" vertical>
                <Flex align="center" gap="small">
                    <Button icon={<PlusOutlined/>} type="primary"
                            onClick={() => editDialogRef.current.openModal()}>新增</Button>
                    {/*右侧*/}
                    <Space style={{float: "right"}}>
                        {/*圆形按钮*/}
                        <Button icon={<DownloadOutlined/>}>导出</Button>
                        {/*<Button >导出</Button>*/}
                    </Space>
                </Flex>
                <Table
                    rowKey="bcId"
                    loading={loading}
                    tableLayout="auto"
                    dataSource={data}
                    columns={columns}
                    scroll={
                        {x: 'auto'}
                    }
                    pagination={false}
                >
                </Table>
            </Flex>
        </TableContainerBox>
        <EditDialog ref={editDialogRef} getList={getTableDateList}/>
    </PageWrapperBox>
}
